<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" href="assets/css/register.css">
    <!--  导入Vue依赖-->
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.js"></script>
</head>
<body>
    <div class="box" id="app">
        <div style="position: absolute;inset: 2px;background: #28292d;padding: 50px 40px;border-radius: 8px;z-index: 2;display: flex;flex-direction: column;">
            <h2>用户注册</h2>
            <div class="inputBox">
                <input type="text" required="required" v-model="userName">
                <span>用户名</span>
                <i></i>
            </div>
            <div class="inputBox">
                <input type="password" required="required" v-model="passwd">
                <span>密码</span>
                <i></i>
            </div>
            <div class="inputBox">
                <input type="password" required="required" v-model="passwd2" onkeydown="this.doAffirm()"/><span v-if="NotSame" style="margin-left: 50px;color: red">密码不一致</span>
                <span>确认</span>
                <i></i>
            </div>
            <div class="links">
                <input type="checkbox"/><span style="color: #b2dba1">我已阅读并同意服务协议和隐私保护</span>
            </div>
            <input type="submit" value="注册" @click="doSignIn()">
        </div>
    </div>
</body>
<script>
    //创建vue对象
    new Vue({
        el:'#app',
        data:{//需要绑定的数据
            user:null,//登陆的用户数据
            userName:null,//用户名
            passwd:null,//密码
            passwd2:null,
            NotSame:false
        },
        methods:{//所有的方法
            doSignIn(){

                if(this.passwd!=this.passwd2){
                    this.NotSame=true;
                }else {
                    var url = 'http://localhost:8080/user/signIn';
                    axios.post(url,{
                        username: this.userName,
                        password: this.passwd
                        }
                    ).then(response =>{
                        alert(response.data.msg);
                    });
                }

            },
            doAffirm(){
                if(!(this.passwd.continue(this.passwd2)&&this.passwd.indexOf(this.passwd2))){
                    this.NotSame=true;
                }else{
                    this.NotSame=false;
                }
            }
        },
        created:function (){//页面加载完成后执行
        }
    });

</script>
</html>